<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分析诊断123</title>
    <link rel="stylesheet" href="${rc.contextPath}/statics/forecase/css/init.css"/>
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/js/echarts.min.js"></script>
    <style>
        body,html{
            height:100%;
            padding:5px;
            box-sizing:border-box;
            overflow:hidden;
            background:#fff;
        }
        .main{
            height:100%;
            background:#fff;
            position:relative;
        }
        .main>div{
            padding:5px;
            padding-top:10px;
            box-sizing:border-box;
            height:100%;
            position:absolute;
            top:0px;
        }
        .main .charts{
            width:70%;
            left:0px;
        }
        .main .picks{
            width:30%;
            right:0px;
            text-align:center;
        }
        .main .picks>div{
            width:100%;
        }
        .main .picks .right_top{
            height:100%;
            font-size:12px;
            line-height:26px;
            overflow:auto;
        }
        .main .picks .right_top dd{
            padding:0px 20px;
            font-weight:800;
        }
        .main .picks .right_top dd input,.main .picks .right_top dd select{
            width:130px;
            height:20px;
            border:1px solid #D0D0D0;
            border-radius:2px;
        }
        .main .picks .right_buttom{
            height:150px;
        }
        .main .picks .right_buttom dd{
            padding:0px 20px;
            box-sizing:border-box;
            font-size:12px;
            line-height:2;
            font-weight:800;
            text-align:left;
        }
        .main .picks dl dt{
            font-size:16px;
            line-height:2;
        }
        .picksitem{
            width:100%;
            font-size:0px;
        }
        .picksitem li{
            text-align:center;
            cursor:pointer;
            display:inline-block;
            padding: 0px 5px;
            font-size:14px;
        }
        .Dividingline_before:before{
            content: "";
            display: block;
            width:100%;
            height:1px;
            background: radial-gradient(#707070 5%, white 100%);
        }
        .Dividingline_after:after{
            content: "";
            display: block;
            width:100%;
            height:1px;
            background: radial-gradient(#707070 5%, white 100%);
        }
        .checkbox{
            display:inline-block;
            vertical-align:middle;
            width:15px;
            height:15px;
            border-radius:3px;
            border:1px solid #D0D0D0;
            margin-right:5px;
            cursor:pointer;
        }
        .ckb{
            background:#5FB878;
            border:#5FB878;
        }
        .ckb img{
            width:100%;
            height:100%;
            vertical-align: top;
        }
        .button{
            border:1px solid #D8D8D8;
            border-radius:5px;
            display:inline-block;
            display:none;
        }
        .button li{
            display:inline-block;
            padding:2px 5px;
            border-right:1px solid #D8D8D8;
            cursor:pointer;
        }
        .center{
            display:none;
        }
        .check{
            border-bottom:2px solid red;
        }
        .main .charts>div{
            padding:5px;
            height:50%;
            box-sizing:border-box;
            position:relative;
        }
        .main .charts .left_top {

        }
        .main .charts .right_top{
        }
        .main .charts .chart{
            width:100%;
            height:100%;
        }
        .main .charts h3{
            position:absolute;
            left:50%;
            top:0px;
            font-size:16px;
        }
        .main .charts p{
            position:absolute;
            left:0px;
            top:0px;
            font-size:12px;
        }
        #ck4  td:nth-child(1){
            text-align: right;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="charts">
        <div class="left_top Dividingline_after" id="sy" style="display: none">
            <p>Accelaration/g</p>
            <h3>时域数据</h3>
            <div id="charts1" class="chart" ></div>
        </div>
        <div class="right_top" id="other" style="display: none">
            <p>Accelaration/g</p>
            <h3 id="change">时域数据--滤波设计</h3>
            <div id="charts2" class="chart"></div>
        </div>
    </div>
    <div class="picks">
        <div class="right_top">
            <dl>
                <dt class="Dividingline_before Dividingline_after">
                    ==数据选择区==
                </dt>
                <dd>
                    <ul>
                        <li class="Dividingline_after"><i class="checkbox"></i><input type="checkbox" name="" hidden>仅选择故障数据</li>
                        <li class="Dividingline_after">设备：
                            <select>
                                <option>已选择设备001</option>
                            </select>
                        </li>
                        <li class="Dividingline_after">
                            工况：
                            <select>
                                <option>==请选择工况名称==</option>
                                <option>工况A</option>
                                <option>工况B</option>
                                <option>工况C</option>
                            </select>
                        </li>
                        <li class="Dividingline_after">
                            通道：
                            <select id="passageway">
                                <option value="" style="display: none;"  selected disabled>请选择通道</option>
                                <option value="1">电流A</option>
                                <option value="2">电流B</option>
                                <option value="3">电流C</option>
                                <option value="4">电压A</option>
                                <option value="2">电压B</option>
                                <option value="1">电压C</option>
                            </select>
                        </li>
                        <li>起始：<input type="date" name="" placeholder="年 / 月 / 日" id="start"></li>
                        <li>结束：<input type="date" name="" placeholder="年 / 月 / 日" id="end"></li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt class="Dividingline_before Dividingline_after">==算法选择区==</dt>
                <dd>
                    <ul  class="picksitem">
                        <li data-href="ck1">时域</li>
                        <li data-href="ck2">频域</li>
                        <li data-href="ck4">滤波设计</li>
                        <li data-href="ck5" id="d1">轴电流波形图</li>
                        <li data-href="ck5" id="d2">轴电流频谱图</li>
                        <li data-href="ck5" id="d3">轴电流趋势图</li>
                        <li data-href="ck5" id="d4">局部放电趋势图</li>
                    </ul>
                    <ul class="button" id="ck1">
                        <li>时域图</li>
                        <li id="zxg">自相关</li>
                        <li id="hxg">互相关</li>
                    </ul>
                    <ul  class="button" id="ck2">
                        <li id="ppt">频域图</li>
                        <li id="xeb">希尔伯特变换</li>
                    </ul>
                        <table style="margin:0px auto;display: none" id="ck4">
                            <tr>
                                <td>滤波器类型：</td>
                                <td>
                                    <select name="type" id="band">
                                        <option value="1">低通滤波器</option>
                                        <option value="2">高通滤波器</option>
                                        <option value="3">带通滤波器</option>
                                        <option value="4">带阻滤波器</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>采样频率(Hz)：</td>
                                <td>
                                    <input type="text" id="fs"/>
                                </td>
                            </tr>
                            <tr>
                                <td>阶次：</td>
                                <td><input type="text" id="n"></td>
                            </tr>
                            <tr>
                                <td>频率起始(Hz)：</td>
                                <td><input type="text" id="fln"></td>
                            </tr>
                            <tr>
                                <td>频率终止(Hz)：</td>
                                <td><input type="text" id="fhn"></td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align:center"><p style="line-height:28px;"><a href="javascript:void(0)" id="ok">确认</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">重置</a></p></td>
                            </tr>
                        </table>
                    <ul  class="button" id="ck5">
                    </ul>
                </dd>
            </dl>
        </div>
<!--        <div class="right_buttom">
            <dl>
                <dt class="Dividingline_before Dividingline_after">
                    ==故障判断==
                </dt>
                <dd>
                    <ul>
                        <li class="Dividingline_after">异常指标：&nbsp;&nbsp;峰值35.7&nbsp;&nbsp;俏峰值</li>
                        <li class="Dividingline_after">诊断结果</li>
                        <li class="Dividingline_after">故障类型：故障5</li>
                        <li>故障原因：刀具磨损严重或者主轴不对中</li>
                    </ul>
                </dd>
            </dl>
        </div>-->
    </div>
</div>
</body>
<script>
    function getOption(data,clumn){
        var option = {
            color: ['#FFCC33'],
            toolbox:{
                feature: {
                    dataZoom: {
                        yAxisIndex: false
                    },
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top:"10%",
                left: '1%',
                right: '1%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: clumn,

                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                axisLine:{
                    onZero:false
                }
            },
            yAxis: {
                type: 'value',
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
            },
            series: [{
                type: 'bar',
                data: data,
                // Set `large` for large data amount
                large: true
            }]
        };
        return option;
    }

    function generateData(count) {
        var baseValue = Math.random() * 1000;
        var time = +new Date(2011, 0, 1);
        var smallBaseValue;

        function next(idx) {
            smallBaseValue = idx % 30 === 0
                ? Math.random() * 700
                : (smallBaseValue + Math.random() * 500 - 250);
            baseValue += Math.random() * 20 - 10;
            return Math.max(
                0,
                Math.round(baseValue + smallBaseValue) + 3000
            );
        }

        var categoryData = [];
        var valueData = [];

        for (var i = 0; i < count; i++) {
            categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
            if(i%2==0){
                valueData.push((-next(i)).toFixed(2));
            }else{
                valueData.push(next(i).toFixed(2));
            }

            time += 1000;
        }

        return {
            categoryData: categoryData,
            valueData: valueData
        };
    }
    $(document).ready(function(){
       var dataCount = 5e4;


      //  var myChart2 = echarts.init(document.getElementById('charts2'));
       // myChart2.setOption(getOption(data));
    });
    $(".picksitem li").click(function(){
        $(".picksitem li").removeClass("check");
        $(this).prop("class","check");
        var win=$(this).attr("data-href");
        $(".button").css("display","none");
        $("#ck4").css("display","none");
        $("#"+win).css("display","inline-block");
    });
    $(".button li").click(function(){
        var win=$(this).attr("data-href");
        if(win){
            $("#"+win).css("display","block");
        }
        return false;
    });
    $(".checkbox").click(function(){
        $(".checkbox").addClass("ckb");
        $(".checkbox").html("<img src='${rc.contextPath}/statics/img/check.png'>");
    });
    var page=1;
    var datass;
    var clumn=[];
    $("#passageway").change(function(){
        $.post("${rc.contextPath}/electricalSignal/distory",{type:1,page:page+3,passageway:$("#passageway").val()},function(d){
            $("#sy").css("display","block");
            var myChart = echarts.init(document.getElementById('charts1'));
            clumn=[];
            for(var i=0;i<d.datas.length;i++){
                clumn.push(i);
            }
            datass=d.datas;
            myChart.setOption(getOption(d.datas,clumn));
        },"json");
    });
    $("#zxg").click(function(){
        $.post("${rc.contextPath}/electricalSignal/autoCorrelation",{passageway:$("#passageway").val()},function(d){
            var clumn=[];
            var data=[];
            for(var i=0;i<d.length;i++){
                if(i<= d.length/2){
                    clumn.push(d[i]);
                }else{
                    data.push(d[i]);
                }
            }
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(data,clumn));
            $("#change").html("时域数据--自相关");
        },"json")
    });
    $("#hxg").click(function(){
        $.post("${rc.contextPath}/electricalSignal/crossCorrelation",{passageway:$("#passageway").val()},function(d){
            var clumn=[];
            var data=[];
            for(var i=0;i<d.length;i++){
                if(i<= d.length/2){
                    clumn.push(d[i]);
                }else{
                    data.push(d[i]);
                }
            }
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(data,clumn));
            $("#change").html("时域数据--互相关");
        },"json")
    });
    $("#ppt").click(function(){
        $.post("${rc.contextPath}/electricalSignal/fft1",{passageway:$("#passageway").val()},function(d){
            var data=[];
            // for(var i=0;i<d.length;i++){
            //     if(i<= d.length/2){
            //         clumn.push(d[i]);
            //     }else{
            //         data.push(d[i]);
            //     }
            // }
            $("#other").css("display","block");
            console.log(clumn);
            console.log(d.datas);
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(d.datas,clumn));
            $("#change").html("时域数据--频谱图");
        },"json")
    });
    $("#xeb").click(function(){
        $.post("${rc.contextPath}/electricalSignal/hilbtb",{passageway:$("#passageway").val()},function(d){
            var clumn=[];
            var data=[];
            for(var i=0;i<d.length;i++){
                if(i<= d.length/2){
                    clumn.push(d[i]);
                }else{
                    data.push(d[i]);
                }
            }
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(data,clumn));
            $("#change").html("时域数据--希尔伯特变换");
        },"json")
    });
    $("#ok").click(function(){
        $.post("${rc.contextPath}/electricalSignal/filter",{passageway:$("#passageway").val(),fs:$("#fs").val(),band:$("#band").val(),fhn:$("#fhn").val(),fln:$("#fln").val(),n:$("#n").val()},function(d){
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(d,clumn),true);
            $("#change").html("时域数据--滤波");
        },"json")
    });
    $("#d1").click(function(){
        $.post("${rc.contextPath}/electricalSignal/d1",{passageway:$("#passageway").val(),fs:$("#fs").val(),band:$("#band").val(),fhn:$("#fhn").val(),fln:$("#fln").val(),n:$("#n").val()},function(d){
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(d,clumn),true);
            $("#change").html("轴电流波形图");
        },"json")
    });
    $("#d2").click(function(){
        $.post("${rc.contextPath}/electricalSignal/d2",{passageway:$("#passageway").val(),fs:$("#fs").val(),band:$("#band").val(),fhn:$("#fhn").val(),fln:$("#fln").val(),n:$("#n").val()},function(d){
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(d,clumn),true);
            $("#change").html("轴电流频谱图");
        },"json")
    });
    $("#d3").click(function(){
        $.post("${rc.contextPath}/electricalSignal/d3",{passageway:$("#passageway").val(),fs:$("#fs").val(),band:$("#band").val(),fhn:$("#fhn").val(),fln:$("#fln").val(),n:$("#n").val()},function(d){
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(d,clumn),true);
            $("#change").html("轴电流趋势图");
        },"json")
    });
    $("#d4").click(function(){
        $.post("${rc.contextPath}/electricalSignal/d4",{passageway:$("#passageway").val(),fs:$("#fs").val(),band:$("#band").val(),fhn:$("#fhn").val(),fln:$("#fln").val(),n:$("#n").val()},function(d){
            $("#other").css("display","block");
            var myChart2 = echarts.init(document.getElementById('charts2'));
            myChart2.setOption(getOption(d,clumn),true);
            $("#change").html("局部放电趋势图");
        },"json")
    });
</script>
</html>